<template>
  <div class="short-link-container">
    <!-- 主卡片 -->
    <el-card class="main-card" shadow="always">
      <!-- 标题区域 -->
      <div class="header">
        <div class="logo">
          <el-icon class="logo-icon"><Link /></el-icon>
          <h1>ShortLink</h1>
        </div>
        <p class="subtitle">快速、安全、可靠的短链接生成服务</p>
      </div>

      <!-- 表单区域 -->
      <el-form :model="form" ref="formRef" :rules="rules" label-position="top">
        <!-- 原始链接输入 -->
        <el-form-item label="原始链接" prop="originUrl">
          <el-input
            v-model="form.originUrl"
            placeholder="请输入需要缩短的链接"
            size="large"
            clearable
          >
            <template #prefix>
              <el-icon><Link /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <!-- 自定义短码 -->
        <el-form-item label="自定义短码（可选）" prop="customCode">
          <el-input
            v-model="form.customCode"
            placeholder="留空则自动生成"
            size="large"
            clearable
          >
            <template #prefix>
              <el-icon><Edit /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <!-- 生成按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            size="large"
            @click="generateShortLink"
            :loading="loading"
            class="generate-btn"
          >
            生成短链接
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 结果展示卡片 -->
    <transition name="slide-up">
      <el-card v-if="result.shortUrl" class="result-card" shadow="always">
        <div class="result-header">
          <el-icon class="success-icon"><SuccessFilled /></el-icon>
          <span>生成成功！</span>
        </div>
        
        <div class="result-content">
          <el-input
            v-model="result.shortUrl"
            readonly
            size="large"
          >
            <template #append>
              <el-button @click="copyToClipboard" type="primary">
                复制
              </el-button>
            </template>
          </el-input>
        </div>

        <!-- 统计信息 -->
        <div class="stats">
          <div class="stat-item">
            <div class="stat-value">{{ result.compressionRatio }}%</div>
            <div class="stat-label">压缩比</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ result.savedChars }}</div>
            <div class="stat-label">节省字符</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ result.responseTime }}ms</div>
            <div class="stat-label">响应时间</div>
          </div>
        </div>
      </el-card>
    </transition>

    <!-- 核心特性展示 -->
    <el-card class="features-card" shadow="hover">
      <div class="features-header">
        <h3>核心特性</h3>
      </div>
      
      <div class="features-grid">
        <div class="feature-item">
          <div class="feature-icon speed">
            <el-icon><Lightning /></el-icon>
          </div>
          <h4>极速生成</h4>
          <p>毫秒级响应，高性能处理</p>
        </div>
        
        <div class="feature-item">
          <div class="feature-icon security">
            <el-icon><Lock /></el-icon>
          </div>
          <h4>安全可靠</h4>
          <p>企业级安全保障</p>
        </div>
        
        <div class="feature-item">
          <div class="feature-icon analytics">
            <el-icon><TrendCharts /></el-icon>
          </div>
          <h4>数据统计</h4>
          <p>详细的访问分析</p>
        </div>
        
        <div class="feature-item">
          <div class="feature-icon custom">
            <el-icon><Setting /></el-icon>
          </div>
          <h4>自定义短码</h4>
          <p>支持个性化短码</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import api from '../utils/api'

export default {
  name: 'ShortLinkGenerator',
  setup() {
    const formRef = ref()
    const loading = ref(false)
    
    const form = reactive({
      originUrl: '',
      customCode: ''
    })
    
    const result = reactive({
      shortUrl: '',
      compressionRatio: 0,
      savedChars: 0,
      responseTime: 0
    })
    
    const rules = {
      originUrl: [
        { required: true, message: '请输入原始链接', trigger: 'blur' },
        { 
          pattern: /^https?:\/\/.+/, 
          message: '请输入有效的URL地址', 
          trigger: 'blur' 
        }
      ]
    }
    
    const generateShortLink = async () => {
      if (!formRef.value) return
      
      try {
        await formRef.value.validate()
        loading.value = true
        
        const startTime = Date.now()
        const response = await api.generateShortLink({
          originUrl: form.originUrl,
          customCode: form.customCode || undefined
        })
        const data = response.data
        const endTime = Date.now()
        const responseTime = endTime - startTime
        
        // 计算统计数据
        const originalLength = form.originUrl.length
        const shortLength = data.data.shortUrl.length
        const savedChars = originalLength - shortLength
        const compressionRatio = ((savedChars / originalLength) * 100).toFixed(1)
        
        result.shortUrl = data.data.shortUrl
        result.compressionRatio = compressionRatio
        result.savedChars = savedChars
        result.responseTime = responseTime
        
        ElMessage.success('短链接生成成功！')
      } catch (error) {
        console.error('生成失败:', error)
        ElMessage.error(error.response?.data?.message || '生成失败，请重试')
      } finally {
        loading.value = false
      }
    }
    
    const copyToClipboard = async () => {
      try {
        await navigator.clipboard.writeText(result.shortUrl)
        ElMessage.success('已复制到剪贴板')
      } catch (error) {
        // 降级方案
        const textArea = document.createElement('textarea')
        textArea.value = result.shortUrl
        document.body.appendChild(textArea)
        textArea.select()
        document.execCommand('copy')
        document.body.removeChild(textArea)
        ElMessage.success('已复制到剪贴板')
      }
    }
    
    return {
      formRef,
      form,
      result,
      rules,
      loading,
      generateShortLink,
      copyToClipboard
    }
  }
}
</script>

<style scoped>
.short-link-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.main-card {
  border-radius: 16px;
  border: none;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.logo-icon {
  font-size: 32px;
  color: #667eea;
}

.logo h1 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.subtitle {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.generate-btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
}

.result-card {
  border-radius: 16px;
  border: none;
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
}

.result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 600;
  color: #155724;
}

.success-icon {
  font-size: 20px;
  color: #28a745;
}

.result-content {
  margin-bottom: 20px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
}

.stat-item {
  background: rgba(255, 255, 255, 0.8);
  padding: 16px;
  border-radius: 12px;
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.features-card {
  border-radius: 16px;
  border: none;
}

.features-header {
  text-align: center;
  margin-bottom: 24px;
}

.features-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.feature-item {
  text-align: center;
  padding: 20px;
  border-radius: 12px;
  background: #f8f9fa;
  transition: transform 0.2s ease;
}

.feature-item:hover {
  transform: translateY(-2px);
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 20px;
}

.feature-icon.speed {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #f59e0b;
}

.feature-icon.security {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  color: #059669;
}

.feature-icon.analytics {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  color: #2563eb;
}

.feature-icon.custom {
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
  color: #7c3aed;
}

.feature-item h4 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.feature-item p {
  font-size: 12px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .stats {
    grid-template-columns: 1fr;
  }
}
</style>